<template>
  <div class="todo-list">
    <h2>Todo List</h2>
    <input placeholder="Add a new todo" v-model="infos" />
    <button @click="addinfo">Add</button>

    <ul>
      <li v-for="(item, index) in arrinfo" :key="item.id">
        {{ item.name }}&nbsp;{{ index }}
        <div><a href="javascript:;" @click="dela(item.id)">删除</a></div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

interface INfo {
  id: number
  name: string
}

const arrinfo = ref<INfo[]>([
  {
    id: 0,
    name: 'Sample Todo'
  }
])

const infos = ref('Sample Todo')

const addinfo = () => {
  arrinfo.value.push({
    id: arrinfo.value.length + 1,
    name: infos.value
  })
}

const dela = (id: number) => {
  arrinfo.value = arrinfo.value.filter((item) => item.id !== id)
}
</script>

<style lang="scss" scoped>
.todo-list {
  text-align: center;
}

input {
  padding: 5px;
  margin-right: 10px;
}

button {
  padding: 5px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0b7dda;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  cursor: pointer;
  padding: 10px;
  margin: 5px 0;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  gap: 10px;
}

li:hover {
  background-color: #ddd;
}
</style>
